<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>明细</title>
    <link href="./weui/weui.css" rel="stylesheet">
	<link href="./weui/weui2.css" rel="stylesheet">
    <script src="./weui/zepto.min.js"></script>
    <style>
        html,body{min-height:100%;}
		body{background:#f8f8f8;padding-bottom:60px;color:#333333;height:auto;}
		html{font-size:75px;}
        .tenttab,.tenttab .weui_tab_bd{height:auto;}
		.weui_navbar_item.tab-mycolor{background: rgba(0, 0, 0, 0) none repeat scroll 0 0;border-bottom: 3px solid #006d46;color: #006d46;}
		.tenttab .weui_navbar_item{margin:0 .5rem;font-size:.43rem;}
		.tenttab .weui_navbar:after{height:0;border:none;}
		.tenttab .weui_navbar{background:#ffffff;position:inherit;}
		.tenttab .weui_navbar+.weui_tab_bd{padding-top:0;}
        .tenttab .weui_tab_bd_item{padding:.5rem;}
		.xfitem{background:#ffffff;border-radius: 5px;padding:.6rem .5rem 1.6rem .5rem;position:relative;}
		.xfitem .xqp{position:absolute;bottom:.4rem;right:.5rem;}
		.xfitem .xfp{position:absolute;right:.5rem;top:.5rem;text-align: right;}
		.xqlink{font-size:.45rem;background:#f1f2f6;line-height:.8rem;border-radius: .45rem;text-align: center;padding:0 13px;display: inline-block;color:#555555;}
        .xfitem .itemprice{font-size:.7rem;color:#fea377;display: block;}
		.xfitem .itemprice i{font-size:.5rem;font-weight: normal;font-style: normal;}
		.xfitem .itemstate{font-size:.5rem;display: block;}
		.itemtitle{padding-left:.8rem;position:relative;}
		.itemtitle span{width:.8rem;display:block;position: absolute;left:0rem;top:0rem;vertical-align: text-top;}
		.itemtitle span img{vertical-align: top;}
		.itemtitle  h2{font-size:.5rem;color:#000000; line-height:.8rem;padding-left:10px;}
		.itemtitle .iteminfo{font-size:.4rem;color:#a1a1a1;margin-top:.4rem;}
		@media screen and (max-width: 640px) {
			html{font-size:64px;}
		}
		@media screen and (max-width: 414px) {
			html{font-size:41px;}
		}
		@media screen and (max-width: 375px) {
			html{font-size:37px;}
		}
		@media screen and (max-width: 320px) {
			html{font-size:32px;}
		}
    </style>
</head>
<body>
    <div class="weui_tab tenttab" id="tenttab">
		<div class="weui_navbar">
			<div class="weui_navbar_item tab-mycolor">待销费</div>
			<div class="weui_navbar_item">已完成</div>
		</div>
		<div class="weui_tab_bd">
			<div class="weui_tab_bd_item">
				<div class="xfitem">
					<div class="itemtitle">
						<span><img src="./weui/images/uimingxi.png" width="100%" alt=""></span>
						<h2>旅游xiaofei</h2>
						<div class="iteminfo">
							<p>06-20至24</p>
							<p>酒店、餐食、门票等</p>
						</div>
					</div>
					<div class="xfp">
						<strong class="itemprice"><i>￥</i>5260</strong>
						<span class="itemstate">预定成功</span>
					</div>
					<div class="xqp"><a href="" class="xqlink">查看详情</a></div>
				</div>
			</div>
			<div class="weui_tab_bd_item">
				选项二内容
			</div>
		</div>
    </div>
    <script>
        $(function(){
            $('#tenttab').tab({defaultIndex:0, activeClass:"tab-mycolor"});
        });
    </script>
</body>
</html>